<template>
    <div class="app-container">

        <!--查询表单-->
        <div class="search-div">
            <el-form label-width="70px" size="small">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="角色名称">
                            <el-input style="width: 100%" v-model="searchObj.roleName" placeholder="角色名称"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row style="display:flex">
                    <el-button type="primary" icon="el-icon-search" size="mini" :loading="loading"
                        @click="fetchData()">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetData">重置</el-button>
                    <el-button type="success" icon="el-icon-plus" size="mini" @click="add">添 加</el-button>
                    <el-button class="btn-add" size="mini" @click="batchRemove()">批量删除</el-button>
                </el-row>
            </el-form>
        </div>

        <el-dialog title="添加/修改" :visible.sync="dialogVisible" width="40%">
            <el-form ref="dataForm" :model="sysRole" label-width="150px" size="small" style="padding-right: 40px;">
                <el-form-item label="角色名称">
                    <el-input v-model="sysRole.roleName" />
                </el-form-item>
                <el-form-item label="角色编码">
                    <el-input v-model="sysRole.roleCode" />
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false" size="small" icon="el-icon-refresh-right">取 消</el-button>
                <el-button type="primary" icon="el-icon-check" @click="saveOrUpdate()" size="small">确 定</el-button>
            </span>
        </el-dialog>


        <!-- 表格 -->
        <el-table v-loading="listLoading" :data="list" stripe border style="width: 100%;margin-top: 10px;"
            @selection-change="handleSelectionChange">

            <el-table-column type="selection" />

            <el-table-column label="序号" width="70" align="center">
                <template slot-scope="scope">
                    {{ (pageNo - 1) * pageSize + scope.$index + 1 }}
                </template>
            </el-table-column>

            <el-table-column prop="roleName" label="角色名称" />
            <el-table-column prop="roleCode" label="角色编码" />
            <el-table-column prop="createTime" label="创建时间" width="160" />
            <el-table-column label="操作" width="200" align="center">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row.id)" title="修改" />
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeDataById(scope.row.id)"
                        title="删除" />
                    <el-button type="warning" icon="el-icon-baseball" size="mini" @click="showAssignAuth(scope.row)"
                        title="分配权限" />
                </template>
            </el-table-column>

        </el-table>

        <!-- 分页组件 -->
        <el-pagination :current-page="pageNo" :total="total" :page-size="pageSize"
            style="padding: 30px 0; text-align: center;" layout="total, prev, pager, next, jumper"
            @current-change="fetchData" />


    </div>
</template>
<script>
    import api from '@/api/system/sysRole'
    export default {
        // 定义数据模型
        data() {
            return {
                list: [],// 角色列表数据
                pageNo: 1,// 当前页码
                pageSize: 3,// 每页显示条数
                total: 0,// 总记录数
                searchObj: {},// 条件对象
                dialogVisible: false,// 弹窗显示状态
                sysRole: {},//封装表单角色数据
                selections: [],// 多个复选框
            }
        },
        // 页面渲染成功后获取数据
        created() {
            this.fetchData()
        },
        // 定义方法
        methods: {
            //条件分页查询
            fetchData(current = 1) {
                this.pageNo = current
                api.getPageList(this.pageNo, this.pageSize, this.searchObj)
                    .then(response => {
                        this.list = response.data.records
                        this.total = response.data.total
                    })
            },

            // 重置表单
            resetData() {
                console.log('重置查询表单')
                this.searchObj = {}
                this.fetchData()
            },

            //删除
            removeDataById(id) {
                // debugger
                this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => { // promise
                    // 点击确定，远程调用ajax
                    return api.removeById(id)
                }).then((response) => {
                    this.fetchData(this.page)
                    this.$message.success(response.message || '删除成功')
                })
            },

            //添加
            add() {
                this.dialogVisible = true
            },

            saveOrUpdate() {

                this.saveBtnDisabled = true // 防止表单重复提交
                //根据id值判断
                if (!this.sysRole.id) {
                    this.save()
                } else {
                    this.update()
                }
            },
            //添加角色
            save() {
                api.save(this.sysRole)
                    .then(response => {
                        //提示
                        this.$message.success(response.message || '操作成功')
                        //关闭弹窗
                        this.dialogVisible = false
                        //刷新页面
                        this.fetchData()
                    })
            },
            //点击修改，弹出框，根据id值获取角色信息
            edit(id) {
                //弹出框
                this.dialogVisible = true
                //根据id值获取角色信息
                this.fetchDataById(id)
            },

            //根据id值获取角色信息
            fetchDataById(id) {
                api.getById(id)
                    .then(response => {
                        console.log(response.data)
                        this.sysRole = response.data
                    })
            },
            //修改
            update() {
                if (!this.sysRole.id) {
                    this.$message.error('角色ID不能为空');
                    return;
                }
                api.update(this.sysRole).then(response => {
                    //提示
                    this.$message.success(response.message || '操作成功');
                    //关闭弹窗
                    this.dialogVisible = false;
                    //刷新页面
                    this.fetchData();
                }).catch(error => {
                    console.error('Error updating role:', error);
                    this.$message.error('更新失败');
                });
            },

            //批量删除
            batchRemove() {
                if (this.selections.length === 0) {
                    this.$message.warning('请选择要删除的记录！')
                    return
                }
                this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 点击确定，远程调用ajax
                    // 遍历selection，将id取出放入id列表
                    var idList = []
                    this.selections.forEach(item => {
                        idList.push(item.id)
                    })
                    // 调用api
                    return api.batchRemove(idList)
                }).then((response) => {
                    this.fetchData()
                    this.$message.success(response.message)
                })
            },

            //选择复选框后，把复选框所在内容传递
            handleSelectionChange(selection) {
                this.selections = selection
                console.log(this.selections)
            },

            //跳转到角色分配菜单权限页面
            showAssignAuth(row) {
                this.$router.push('/system/assignAuth?id=' + row.id + '&roleName=' + row.roleName);
            },
        },
    }

</script>